<template>
  <div class="marketDetail">
    <navbar>
      <div slot="center">{{ itemById.title }}</div>
      <div slot="right"></div>
    </navbar>
    <div class="mt"></div>
    <div class="top">
      <single-item :market="itemArr" :is-btn="false"></single-item>
    </div>
    <div class="rule">
      <p class="ruleTitle">使用规则</p>
      <p class="ruleText">1、合作权益产品</p>
      <p class="ruleText">爱奇艺黄金VIP会员月卡</p>
      <p class="ruleText">2、产品权益内容</p>
      <p class="ruleText">爱奇艺黄金VIP会员享有热剧热片前先看爱奇艺黄金VIP会员享有热剧热片前先看
        爱奇艺黄金VIP会员享有热剧热片前先看爱奇艺黄金VIP会员享有热剧热片前先看先看
        先看先。</p>
      <div class="more flex flex-center">
        <p>查看更多</p>
        <img class="marginAuto0" src="@/assets/img/more.png" alt="">
      </div>
    </div>
    <div class="pay fixedBottom flex">
      <div class="left textAlignCenter marginAuto0">
        <p >总计：￥10</p>
        <p class="leftDetail">（已抵扣：￥10）</p>
      </div>
      <p class="right textAlignCenter marginAuto0">去兑换</p>
    </div>
  </div>
</template>

<script>
import Navbar from "../../../components/navbar/navbar";
import {allMarketItemList} from '@/data/market'
import SingleItem from "../singleItem";
export default {
  name: "marketDetail",
  components: {SingleItem, Navbar},
  data() {
    return {
      false:false,
      allMarketItemList,
      itemById:this.getItemById(),
    }
  },
  methods: {
    getItemById(){
      let id=this.$route.query.id;
      let item =allMarketItemList.filter(function (n){
        return n.id===id;
      })
      return item[0];
    }
  },
  computed:{
    itemArr(){
      const arr=[];
      arr.push(this.itemById);
      return arr;
    }
  }
}
</script>

<style scoped>
.top{
  background: linear-gradient(270deg, #B1CBFA 0%, #3098FF 100%);
  padding: .1rem 0 .5rem 0 ;
  /*background: url("../../../assets/img/home/banner1.png");*/
}
.rule{
  margin: .5rem;

}
.ruleTitle{
  font-size: .5rem;
  font-weight: 500;
}
.ruleText,.more{
  font-size: .35rem;
  color: #868686;
  line-height: .65rem;
}
.more img{
  width: .4rem;
  height: .2rem;
  margin-left: .1rem;
}
.pay{
  height: 1.8rem;
  background: skyblue;
}
.right,.left{
  width: 50%;
}
.right{
  color: #fff;
  font-size: .5rem;
}
.leftDetail{
  font-size: .3rem;
}

</style>